<template>
  <basic-card
    :title="$t('menu.log_manage')"
    :iconClass="'el-icon-eleme'"
  >
    <basic-table
      :pageMethod="initData"
      :tableForm="tableForm"
    >
      <template #table-top="basicTable">
        <el-form ref="form" :inline="true" size="small" class="text-right">
          <el-form-item>
            <el-input
              v-model="tableForm.search"
              @change="basicTable.table.refresh"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="basicTable.table.refresh">{{
              $t("botton.search")
            }}</el-button>
            <el-button
              type="danger"
              @click="showDeleteDialop()"
              >{{ $t("botton.clear") }}</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <template #table-column>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="time"
          :label="$t('log.time')"
        >
        </el-table-column>
        <el-table-column
          prop="user"
          :label="$t('log.user')"
        ></el-table-column>
        <el-table-column
          prop="active"
          :label="$t('log.active')"
        ></el-table-column>
        <el-table-column
          prop="params"
          :label="$t('log.params')"
        >
        </el-table-column>
        <!-- <el-table-column prop="goodsDescribe" :label="$t('commodity.description')"></el-table-column> -->
      </template>

      <template #others-elements="basicTable">
        <basic-delete-dialop
          ref="DeleteDialop"
          @confirm="(list) => deleteData(list, basicTable.table.refresh)"
        />
      </template>
    </basic-table>
  </basic-card>
</template>
<script lang="ts">
import Vue from 'vue';
import BasicCard from "@/components/Basic/Card/BasicCard.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";

export default Vue.extend({
  components: { BasicCard, BasicTable },
  data() {
    return {
      tableForm: {
        search: ""
      }
    }
  },
  methods: {
    initData() {
      return Promise.resolve({
        data: {
          total: 5,
          list: [{
            time: "2020-10-11 23:23:23",
            user: "超级管理员",
            active: "喊话",
            params: "{}"
          },
          {
            time: "2020-10-11 23:23:23",
            user: "超级管理员",
            active: "喊话",
            params: "{}"
          },
          {
            time: "2020-10-11 23:23:23",
            user: "超级管理员",
            active: "喊话",
            params: "{}"
          },
          {
            time: "2020-10-11 23:23:23",
            user: "超级管理员",
            active: "喊话",
            params: "{}"
          },
          {
            time: "2020-10-11 23:23:23",
            user: "超级管理员",
            active: "喊话",
            params: "{}"
          }]
        }
      });
    },
    showDeleteDialop() {
      const deleteList: Array<any> = [];
      deleteList.push({
        id: null,
        label: "清空日志"
      });
      (this.$refs.DeleteDialop as any).init(deleteList);
    }
  }
})
</script>
<style lang="scss" scoped>

</style>
